import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/AntDesign';
import SplashScreen from 'react-native-splash-screen'
import Home from './work/home/Home'
import My from './work/my/My'
import Login from './work/my/Login'
import Game from './work/my/Game'
import Help from './work/my/Help'
import Recommend from './work/my/Recommend'
import Us from './work/my/Us'
import Register from './work/my/Register'
import Entry from './work/my/Entry'
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const TabNav = ({ navigation }) => {
  setTimeout(() => {
    SplashScreen.hide();
  }, 2000)
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: '#34B9C0',
        labelStyle: {
          fontSize: 14
        }
      }}
    >
      <Tab.Screen
        options={
          {
            title: '听首歌',
            tabBarIcon: ({ color }) => <Icon size={25} name="home" color={color}></Icon>,
          }
        }
        name="song" component={Login} />

      <Tab.Screen
        options={
          {
            title: '说句话',
            tabBarIcon: ({ color }) => <Icon size={25} name="message1" color={color}></Icon>,
          }
        }
        name="word" component={Home} />

      {/* 这个底部栏的title记得删除 */}
      <Tab.Screen
        options={
          {
            title: '播放器',
            tabBarIcon: ({ color }) => <Icon size={25} name="play" color={color}></Icon>,
          }
        }
        name="play" component={Home} />

      <Tab.Screen
        options={
          {
            title: '皮一下',
            tabBarIcon: ({ color }) => <Icon size={25} name="smileo" color={color}></Icon>,
          }
        }
        name="happy" component={Home} />

      <Tab.Screen
        options={
          {
            title: '我的',
            tabBarIcon: ({ color }) => <Icon size={25} name="user" color={color}></Icon>,
          }
        }
        name="mine" component={My} />
    </Tab.Navigator>
  )
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name='tabnav'
          component={TabNav}
          options={{
            headerShown: false
          }} />
          <Stack.Screen
          name='login'
          component={Login}
          options={{
            headerShown: false
          }} />
          <Stack.Screen 
            name="game"
            component={Game}
            options={{
              title:'捏泡泡'
            }}
          />
          <Stack.Screen 
            name="help"
            component={Help}
            options={{
              title:'帮助',
              headerTitleAlign:'center'
            }}
          />
          <Stack.Screen 
            name="recom"
            component={Recommend}
            options={{
              title:'评价',
              headerTitleAlign:'center'
            }}
          />
          <Stack.Screen 
            name="us"
            component={Us}
            options={{
              title:'Family',
              headerTitleAlign:'center'
            }}
          />
          <Stack.Screen 
            name="register"
            component={Register}
            options={{
              title:'注册',
              headerTitleAlign:'center'
            }}
          />
          <Stack.Screen 
            name="entry"
            component={Entry}
            options={{
              title:'登录',
              headerTitleAlign:'center'
            }}
          />
      </Stack.Navigator>
    </NavigationContainer>

  );
}


export default App;